<template>
	<view>
		<view @click="show = true;" style="padding: 5px 0;font-size: ;">
			<text v-if="result.province!=''||result.city!=''||result.area!=''">
			{{result.province}}/{{result.city}}/{{result.area}}</text>
			<text v-else>选择省份/城市/区</text> 
		</view>
		<u-popup  :show="show" @close="cl()" :round="5" :closeOnClickOverlay="true" v-if="show">
			<view style="position: fixed;width: 100%;height: 100vh;left: 0;top: 0;background-color: rgba(0, 0, 0, 0.5);;" @click="cl()">
				<view style="height: 200px;border-radius: 10px 10px 0 0;z-index: 9999999;position: absolute;bottom: 0;width: 100%;background-color: #fff;" @click.stop="">
					<view class="box" style="display: flex;flex-direction: row;overflow: hidden;">
						<scroll-view scroll-y class="list" style="border-top-left-radius: 10px;">
							<view class="list-name" 
							:style="{
								background:result.province==list.name?'#fff':defaultColor,
								color:result.province==list.name?color:'#333'
								}"
								 v-for="list in city.l1" @click="s(list.name,1)">{{list.name}}</view>
						</scroll-view>
						<scroll-view scroll-y class="list" >
							<view class="list-name" 
							:style="{
								background:result.city==list.name?'#fff':defaultColor,
								color:result.city==list.name?color:'#333'
							}"
							 v-for="list in city.l2" @click="s(list.name,2)">{{list.name}}</view>
						</scroll-view>
						<scroll-view scroll-y class="list" style="border-top-right-radius: 10px;">
							<view class="list-name" 
							:style="{
								background:result.area==list.name?'#fff':defaultColor,
								color:result.area==list.name?color:'#333'
							}"
							 v-for="list in city.l3" @click="s(list.name,3)">{{list.name}}</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		name:"moxi-city",
		data() {
			return {
				show:false,
				city:{
					l1:{},
					l2:{},
					l3:{}
				},
				color:"#333",
				defaultColor:"#eee",
				name:""
			};
		},computed:{
            result: {
                get:function() {
                    return this.value;
                },
                set:function (v){
                    this.$emit("change", v);
					return result
                }
            }
        },
		model: {
			prop: 'value',
			event: 'change'
		},
		props:{
			value:{
				 type:Object,
				 default(){
					return {}
				}
			}
		},created(){
			this.color = this.$appData.data.app_color;

			this.getAddress((data)=>{
				this.city.l1 = data;
				// this.$set(this.city,'l1',data)
				this.init()
			})
		},
		methods:{
			cl(){
				if(this.result.province ==''||this.result.city==''||this.result.area==''){
					if(this.show){
						this.msg('请选择完整的省/市/区');
						return;
					}
				}
				this.show = false
			},
			init(){
				for(let k in this.city.l1){
					if(this.result.province==this.city.l1[k].name){
						this.city.l2 = this.city.l1[k].list;
						for(let l in this.city.l1[k].list){
							if(this.result.city==this.city.l1[k].list[l].name){
								this.city.l3 = this.city.l1[k].list[l].list;
							}
						}
					}
				}
				this.$forceUpdate();
			},
			s(name,type){
				if(type==1){
					this.city.l2 = {};
					this.city.l3 = {};
					this.result.city = '';
					this.result.area = '';
				}else if(type==2){
					this.result.area = '';
				}
				for(let k in this.city['l'+type]){
					if(type<3){
						if(type==1){
							// this.$set(this.city,'l3',{});
							this.result.province = name;
							
						}else if(type==2){
							this.result.city = name;
						}
						if(name == this.city['l'+type][k].name){
							this.$set(this.city,('l'+(type+1)),this.city['l'+type][k].list)
							break;
						}else if(!name||name==''){
							this.$set(this.city,('l'+(type+1)),this.city['l'+type][k].list)
							break;
						}
					}else{
					
						if(!name||name==''){
							for(let s in this.city.l3.list){
								this.result.area = this.city.l3.list[s].name;
								break;
							}
						}else{
							this.result.area = name;
						}
						this.show = false
					}
				}
				this.$forceUpdate();
				  this.$emit("change", this.result);
			}
		}
	}
</script>

<style>
.list{width: 33%;display: flex;flex-direction: column;overflow-y: auto;height: 200px;
box-shadow: 0 0 3px #ccc;margin: 1px;}
.list-name{padding: 6px;font-size: 14px;color: #333;border-bottom: 1px #e3e3e3 solid;}
</style>